<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- 
    - primary meta tags
  -->
  <title>商店 - 610的书窝</title>
  <meta name="title" content="商店 - 610的书窝">
  <meta name="description" content="欢迎来到610书窝的书店，这里有各类精选图书、文具和读书周边">

  <!-- 
    - favicon
  -->
  <link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml">

  <!-- 
    - custom css link
  -->
  <link rel="stylesheet" href="./assets/css/style.css">

  <!-- 
    - Font Awesome CDN Link (Added)
  -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
    integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />

  <!-- 
    - google font link
  -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600&family=Work+Sans:wght@400;500;700&display=swap"
    rel="stylesheet">
</head>

<body id="top">

  <!-- 
    - #HEADER
  -->
  <header class="header" data-header>
    <div class="header-top">
      <div class="container">

        <a href="index.html" class="logo">
          <img src="./assets/images/logo.svg" width="138" height="28" alt="booken home">
        </a>

        <div class="input-wrapper">
          <input type="search" name="search" placeholder="搜索我们的商店" class="input-field">

          <button class="btn btn-primary">搜索</button>
        </div>

        <div class="header-action">

          <a href="./cart.html" class="header-action-btn" aria-label="cart" title="购物车">
            <span class="span">3</span>
            <ion-icon name="bag-handle-outline" aria-hidden="true"></ion-icon>
          </a>

          <button class="nav-open-btn" aria-label="open menu" title="打开菜单" data-nav-toggler>
            <ion-icon name="menu-outline" aria-hidden="true"></ion-icon>
          </button>

          <a href="./login.html" class="header-action-btn" aria-label="user" title="登录/注册">
            <ion-icon name="person-outline" aria-hidden="true"></ion-icon>
          </a>

        </div>

      </div>
    </div>

    <div class="header-bottom" data-navbar>
      <div class="container">

        <nav class="navbar">

          <button class="nav-close-btn" data-nav-toggler aria-label="close menu" title="关闭菜单">
            <ion-icon name="close-outline" aria-hidden="true"></ion-icon>
          </button>

          <div class="navbar-top">
            <input type="search" name="search" placeholder="搜索我们的商店" class="input-field">

            <button class="search-btn" aria-label="Search">
              <ion-icon name="search-outline" aria-hidden="true"></ion-icon>
            </button>
          </div>

          <ul class="navbar-list">

            <li>
              <a href="index.html" class="navbar-link">首页</a>
            </li>

            <!-- 博客导航项 -->
            <li>
              <a href="blog.html" class="navbar-link navbar-link-cute blog-link">
                <span class="cute-icon">📚</span>
                博客
                <span class="cute-bubble">读好文~</span>
              </a>
            </li>

            <!-- 商店导航项 - 当前激活页面 -->
            <li>
              <a href="shop.html" class="navbar-link navbar-link-cute shop-link"
                style="background-color: var(--pastel-yellow);">
                <span class="cute-icon">🛍️</span>
                商店
                <span class="cute-bubble">买买买~</span>
              </a>
            </li>

            <!-- 关于我们导航项 -->
            <li>
              <a href="about.html" class="navbar-link navbar-link-cute about-link">
                <span class="cute-icon">🏡</span>
                关于我们
                <span class="cute-bubble">认识我们~</span>
              </a>
            </li>

            <!-- 联系方式导航项 -->
            <li>
              <a href="contact.html" class="navbar-link navbar-link-cute contact-link">
                <span class="cute-icon">✉️</span>
                联系方式
                <span class="cute-bubble">找到我们~</span>
              </a>
            </li>

          </ul>

        </nav>

        <a href="tel:+15813316885" class="header-contact-link">
          <ion-icon name="headset-outline" aria-hidden="true"></ion-icon>

          <span class="span">(+86) 15813316885</span>
        </a>

      </div>
    </div>

    <div class="overlay" data-overlay data-nav-toggler></div>
  </header>

  <main>
    <article>

      <!-- 
        - #商店页面标题部分
      -->
      <section class="section hero has-bg-image" aria-label="shop-hero"
        style="background-image: url('./assets/images/section-bg.jpg')">
        <div class="container">

          <div class="hero-content">

            <h1 class="h1 hero-title has-after">
              610书窝 <br>
              精选书店
            </h1>

            <p class="hero-text">
              在这里，你可以找到各种精选图书、文具和读书周边，为你的阅读生活增添乐趣～
            </p>

          </div>

        </div>
      </section>

      <!-- 
        - #商品分类栏
      -->
      <section class="section">
        <div class="container">
          <!-- 商品分类标签 -->
          <ul class="filter-list">
            <li>
              <button class="filter-btn active" data-filter-btn="all">全部</button>
            </li>
            <li>
              <button class="filter-btn" data-filter-btn="fiction">小说</button>
            </li>
            <li>
              <button class="filter-btn" data-filter-btn="non-fiction">非虚构</button>
            </li>
            <li>
              <button class="filter-btn" data-filter-btn="comics">漫画</button>
            </li>
            <li>
              <button class="filter-btn" data-filter-btn="supplies">文具</button>
            </li>
          </ul>
        </div>
      </section>

      <!-- 
        - #商品列表部分
      -->
      <section class="section featured">
        <div class="container">

          <h2 class="h2 section-title">精选图书</h2>

          <p class="section-text">
            以下是我们精选的图书和文具产品，希望你能找到心仪的宝贝～
          </p>

          <ul class="grid-list">

            <!-- 商品卡片1 -->
            <li>
              <div class="product-card">
                <span class="card-badge">新品</span>

                <div class="card-banner img-holder" style="--width: 384; --height: 480;">
                  <img src="./assets/images/book.png" width="384" height="480" loading="lazy" alt="《春光渐暖》"
                    class="img-cover">

                  <div class="card-action">
                    <button class="action-btn" aria-label="quick view" title="快速查看">
                      <ion-icon name="eye-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to wishlist" title="加入心愿单">
                      <ion-icon name="heart-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="compare" title="比较">
                      <ion-icon name="repeat-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to cart" title="加入购物车">
                      <ion-icon name="bag-handle-outline" aria-hidden="true"></ion-icon>
                    </button>
                  </div>
                </div>

                <div class="card-content">
                  <h3 class="h3">
                    <a href="#" class="card-title">《春光渐暖》</a>
                  </h3>

                  <data class="card-price" value="45">¥45.00</data>

                  <div class="rating-wrapper">
                    <ion-icon name="star" aria-hidden="true"></ion-icon>
                    <ion-icon name="star" aria-hidden="true"></ion-icon>
                    <ion-icon name="star" aria-hidden="true"></ion-icon>
                    <ion-icon name="star" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                  </div>
                </div>
              </div>
            </li>

            <!-- 商品卡片2 -->
            <li>
              <div class="product-card">
                <div class="card-banner img-holder" style="--width: 384; --height: 480;">
                  <img src="./assets/images/book.png" width="384" height="480" loading="lazy" alt="《心灵的慰藉》"
                    class="img-cover">

                  <div class="card-action">
                    <button class="action-btn" aria-label="quick view" title="快速查看">
                      <ion-icon name="eye-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to wishlist" title="加入心愿单">
                      <ion-icon name="heart-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="compare" title="比较">
                      <ion-icon name="repeat-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to cart" title="加入购物车">
                      <ion-icon name="bag-handle-outline" aria-hidden="true"></ion-icon>
                    </button>
                  </div>
                </div>

                <div class="card-content">
                  <h3 class="h3">
                    <a href="#" class="card-title">《心灵的慰藉》</a>
                  </h3>

                  <data class="card-price" value="38">¥38.00</data>

                  <div class="rating-wrapper">
                    <ion-icon name="star" aria-hidden="true"></ion-icon>
                    <ion-icon name="star" aria-hidden="true"></ion-icon>
                    <ion-icon name="star" aria-hidden="true"></ion-icon>
                    <ion-icon name="star" aria-hidden="true"></ion-icon>
                    <ion-icon name="star" aria-hidden="true"></ion-icon>
                  </div>
                </div>
              </div>
            </li>

            <!-- 商品卡片3 -->
            <li>
              <div class="product-card">
                <span class="card-badge">畅销</span>
                <div class="card-banner img-holder" style="--width: 384; --height: 480;">
                  <img src="./assets/images/book.png" width="384" height="480" loading="lazy" alt="《星辰大海》"
                    class="img-cover">

                  <div class="card-action">
                    <button class="action-btn" aria-label="quick view" title="快速查看">
                      <ion-icon name="eye-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to wishlist" title="加入心愿单">
                      <ion-icon name="heart-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="compare" title="比较">
                      <ion-icon name="repeat-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to cart" title="加入购物车">
                      <ion-icon name="bag-handle-outline" aria-hidden="true"></ion-icon>
                    </button>
                  </div>
                </div>

                <div class="card-content">
                  <h3 class="h3">
                    <a href="#" class="card-title">《星辰大海》</a>
                  </h3>

                  <data class="card-price" value="55">¥55.00</data>

                  <div class="rating-wrapper">
                    <ion-icon name="star" aria-hidden="true"></ion-icon>
                    <ion-icon name="star" aria-hidden="true"></ion-icon>
                    <ion-icon name="star" aria-hidden="true"></ion-icon>
                    <ion-icon name="star" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-half" aria-hidden="true"></ion-icon>
                  </div>
                </div>
              </div>
            </li>

            <!-- 商品卡片4 -->
            <li>
              <div class="product-card">
                <div class="card-banner img-holder" style="--width: 384; --height: 480;">
                  <img src="./assets/images/book.png" width="384" height="480" loading="lazy" alt="《时间的礼物》"
                    class="img-cover">

                  <div class="card-action">
                    <button class="action-btn" aria-label="quick view" title="快速查看">
                      <ion-icon name="eye-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to wishlist" title="加入心愿单">
                      <ion-icon name="heart-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="compare" title="比较">
                      <ion-icon name="repeat-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to cart" title="加入购物车">
                      <ion-icon name="bag-handle-outline" aria-hidden="true"></ion-icon>
                    </button>
                  </div>
                </div>

                <div class="card-content">
                  <h3 class="h3">
                    <a href="#" class="card-title">《时间的礼物》</a>
                  </h3>

                  <data class="card-price" value="42">¥42.00</data>

                  <div class="rating-wrapper">
                    <ion-icon name="star" aria-hidden="true"></ion-icon>
                    <ion-icon name="star" aria-hidden="true"></ion-icon>
                    <ion-icon name="star" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                  </div>
                </div>
              </div>
            </li>

            <!-- 商品卡片5 - 文具 -->
            <li>
              <div class="product-card">
                <span class="card-badge">热门</span>
                <div class="card-banner img-holder" style="--width: 384; --height: 480;">
                  <img src="./assets/images/book.png" width="384" height="480" loading="lazy" alt="可爱书签套装"
                    class="img-cover">

                  <div class="card-action">
                    <button class="action-btn" aria-label="quick view" title="快速查看">
                      <ion-icon name="eye-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to wishlist" title="加入心愿单">
                      <ion-icon name="heart-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="compare" title="比较">
                      <ion-icon name="repeat-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to cart" title="加入购物车">
                      <ion-icon name="bag-handle-outline" aria-hidden="true"></ion-icon>
                    </button>
                  </div>
                </div>

                <div class="card-content">
                  <h3 class="h3">
                    <a href="#" class="card-title">可爱书签套装</a>
                  </h3>

                  <data class="card-price" value="12">¥12.00</data>

                  <div class="rating-wrapper">
                    <ion-icon name="star" aria-hidden="true"></ion-icon>
                    <ion-icon name="star" aria-hidden="true"></ion-icon>
                    <ion-icon name="star" aria-hidden="true"></ion-icon>
                    <ion-icon name="star" aria-hidden="true"></ion-icon>
                    <ion-icon name="star" aria-hidden="true"></ion-icon>
                  </div>
                </div>
              </div>
            </li>

            <!-- 商品卡片6 - 文具 -->
            <li>
              <div class="product-card">
                <div class="card-banner img-holder" style="--width: 384; --height: 480;">
                  <img src="./assets/images/book.png" width="384" height="480" loading="lazy" alt="小樱笔记本"
                    class="img-cover">

                  <div class="card-action">
                    <button class="action-btn" aria-label="quick view" title="快速查看">
                      <ion-icon name="eye-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to wishlist" title="加入心愿单">
                      <ion-icon name="heart-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="compare" title="比较">
                      <ion-icon name="repeat-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to cart" title="加入购物车">
                      <ion-icon name="bag-handle-outline" aria-hidden="true"></ion-icon>
                    </button>
                  </div>
                </div>

                <div class="card-content">
                  <h3 class="h3">
                    <a href="#" class="card-title">小樱笔记本</a>
                  </h3>

                  <data class="card-price" value="25">¥25.00</data>

                  <div class="rating-wrapper">
                    <ion-icon name="star" aria-hidden="true"></ion-icon>
                    <ion-icon name="star" aria-hidden="true"></ion-icon>
                    <ion-icon name="star" aria-hidden="true"></ion-icon>
                    <ion-icon name="star" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-half" aria-hidden="true"></ion-icon>
                  </div>
                </div>
              </div>
            </li>

            <!-- 商品卡片7 -->
            <li>
              <div class="product-card">
                <div class="card-banner img-holder" style="--width: 384; --height: 480;">
                  <img src="./assets/images/book.png" width="384" height="480" loading="lazy" alt="《漫画入门》"
                    class="img-cover">

                  <div class="card-action">
                    <button class="action-btn" aria-label="quick view" title="快速查看">
                      <ion-icon name="eye-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to wishlist" title="加入心愿单">
                      <ion-icon name="heart-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="compare" title="比较">
                      <ion-icon name="repeat-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to cart" title="加入购物车">
                      <ion-icon name="bag-handle-outline" aria-hidden="true"></ion-icon>
                    </button>
                  </div>
                </div>

                <div class="card-content">
                  <h3 class="h3">
                    <a href="#" class="card-title">《漫画入门》</a>
                  </h3>

                  <data class="card-price" value="35">¥35.00</data>

                  <div class="rating-wrapper">
                    <ion-icon name="star" aria-hidden="true"></ion-icon>
                    <ion-icon name="star" aria-hidden="true"></ion-icon>
                    <ion-icon name="star" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-half" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                  </div>
                </div>
              </div>
            </li>

            <!-- 商品卡片8 -->
            <li>
              <div class="product-card">
                <span class="card-badge">促销</span>
                <div class="card-banner img-holder" style="--width: 384; --height: 480;">
                  <img src="./assets/images/book.png" width="384" height="480" loading="lazy" alt="《植物的智慧》"
                    class="img-cover">

                  <div class="card-action">
                    <button class="action-btn" aria-label="quick view" title="快速查看">
                      <ion-icon name="eye-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to wishlist" title="加入心愿单">
                      <ion-icon name="heart-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="compare" title="比较">
                      <ion-icon name="repeat-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to cart" title="加入购物车">
                      <ion-icon name="bag-handle-outline" aria-hidden="true"></ion-icon>
                    </button>
                  </div>
                </div>

                <div class="card-content">
                  <h3 class="h3">
                    <a href="#" class="card-title">《植物的智慧》</a>
                  </h3>

                  <data class="card-price" value="48"><del>¥68.00</del> ¥48.00</data>

                  <div class="rating-wrapper">
                    <ion-icon name="star" aria-hidden="true"></ion-icon>
                    <ion-icon name="star" aria-hidden="true"></ion-icon>
                    <ion-icon name="star" aria-hidden="true"></ion-icon>
                    <ion-icon name="star" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                  </div>
                </div>
              </div>
            </li>

          </ul>

          <!-- 加载更多按钮 -->
          <div style="text-align: center; margin-top: 50px;">
            <button class="btn">查看更多商品</button>
          </div>

        </div>
      </section>

      <!-- 
        - #促销部分
      -->
      <section class="section offer has-bg-image" aria-label="special offer"
        style="background-image: url('./assets/images/section-bg.jpg')">
        <div class="container">

          <p class="section-subtitle">特别优惠</p>

          <h2 class="h2 section-title">所有书籍现价五折！勿失良机！</h2>

          <p class="section-text">
            限时优惠，赶快行动吧！使用优惠码"610LOVE"即可享受额外9折优惠～
          </p>

          <ul class="countdown-list">

            <li>
              <p class="countdown-time">15</p>

              <p class="countdown-label">天</p>
            </li>

            <li>
              <p class="countdown-time">21</p>

              <p class="countdown-label">小时</p>
            </li>

            <li>
              <p class="countdown-time">18</p>

              <p class="countdown-label">分钟</p>
            </li>

            <li>
              <p class="countdown-time">14</p>

              <p class="countdown-label">秒</p>
            </li>

          </ul>

          <a href="#" class="btn">立即购买</a>

        </div>
      </section>

    </article>
  </main>

  <!-- 
    - #FOOTER
  -->
  <footer class="footer has-bg-image" style="background-image: url('./assets/images/section-bg.jpg')">

    <div class="footer-top section">
      <div class="container grid-list">

        <div class="footer-brand">

          <a href="#" class="logo">
            <img src="./assets/images/logo.svg" width="138" height="28" alt="610书窝 Logo">
          </a>

          <p class="footer-text">
            欢迎来到610书窝！你的专属宿舍阅读角~ 📚✨
          </p>

          <ul class="social-list">
            <li>
              <a href="#" class="social-link" title="QQ">
                <i class="fa-brands fa-qq"></i>
              </a>
            </li>
            <li>
              <a href="#" class="social-link" title="微信">
                <i class="fa-brands fa-weixin"></i>
              </a>
            </li>
            <li>
              <a href="#" class="social-link" title="微博">
                <i class="fa-brands fa-weibo"></i>
              </a>
            </li>
          </ul>

        </div>

        <ul class="footer-list">

          <li>
            <p class="footer-list-title">关于书窝</p>
          </li>

          <li>
            <a href="#" class="footer-link">书窝故事</a>
          </li>

          <li>
            <a href="./members.html" class="footer-link">成员介绍</a>
          </li>

          <li>
            <a href="#" class="footer-link">加入我们?</a>
          </li>

          <li>
            <a href="#" class="footer-link">书友Q&A</a>
          </li>

          <li>
            <a href="#" class="footer-link">好书推荐</a>
          </li>

        </ul>

        <ul class="footer-list">

          <li>
            <p class="footer-list-title">书友指南</p>
          </li>

          <li>
            <a href="#" class="footer-link">借阅规则</a>
          </li>

          <li>
            <a href="#" class="footer-link">图书分类</a>
          </li>

          <li>
            <a href="#" class="footer-link">荐购通道</a>
          </li>

          <li>
            <a href="#" class="footer-link">书单分享</a>
          </li>

          <li>
            <a href="#" class="footer-link">活动日历</a>
          </li>

        </ul>

        <ul class="footer-list">

          <li>
            <p class="footer-list-title">特色活动</p>
          </li>

          <li>
            <a href="#" class="footer-link">读书分享会</a>
          </li>

          <li>
            <a href="#" class="footer-link">主题书展</a>
          </li>

          <li>
            <a href="#" class="footer-link">好物交换</a>
          </li>

          <li>
            <a href="#" class="footer-link">考试周加油站</a>
          </li>

          <li>
            <a href="#" class="footer-link">留言板</a>
          </li>

        </ul>

      </div>
    </div>

    <div class="footer-bottom">
      <div class="container">

        <p class="copyright">
          © 2025 610书窝 | 由舍友们用心维护~ ❤️
        </p>

      </div>
    </div>

  </footer>

  <!-- 
    - #BACK TO TOP
  -->
  <a href="#top" class="back-top-btn" aria-label="返回顶部" data-back-top-btn>
    <ion-icon name="chevron-up" aria-hidden="true"></ion-icon>
  </a>

  <!-- 
    - custom js link
  -->
  <script src="./assets/js/script.js" defer></script>

  <!-- 
    - ionicon link
  -->
  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

</body>

</html>